<template>
  <div class="staff">
    <el-form>
      <el-form-item>
        <el-button size="small"
          type="primary"
          class="fr"
          :disabled="banners.length>=4"
          @click="_add()" v-has="'bannerstaffadd'">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-table class="easy-table"
          border
          :data="banners"
          style="width:50%">
          <el-table-column label="编号"
            width="50">
            <template slot-scope="scope">
              <span>{{scope.$index+1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="轮播图片">
            <template slot-scope="scope">
              <img :src="scope.row.img"
                width="100"
                style="vertical-align:top;margin:5px 0"
                alt="">
            </template>
          </el-table-column>
          <el-table-column label="图片跳转页面">
            <template slot-scope="scope">
              <p>{{scope.row.name ? scope.row.name:'-'}}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button type="text"
                @click="_delete(scope.row.id)" v-has="'bannerstaffdelete'">删除</el-button>
              <el-button type="text"
                @click="_edit(scope.row)"  v-has="'bannerstaffadd'">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 编辑、新增 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="650px">
      <el-form label-width="120px"
        :model="form"
        ref="form"
        :rules="rules">
        <el-form-item label="轮播图片"
          prop="img">
          <UploadPic v-model="form.img" />
        </el-form-item>
        <el-form-item label="设置当前图片链接"
         >
          <el-select v-model="form.skipId">
            <el-option v-for="item in bannerPull"
              :key="item.id"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="sure('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadPic from "@/components/common/uploadPic";
import {
  getBannerList,
  deleteBanner,
  bannerPullList,
  updateBanner
} from "@/public/js/banner";
export default {
  components: {
    UploadPic
  },
  props: {},
  data() {
    return {
      banners: [],
      title: "新增",
      dialogVisible: false,
      bannerPull: [],
      form: {
        id: "",
        type: 2,
        img: "",
        skipType: "",
        skipId: ""
      },
      rules: {
        img: [
          { required: true, message: "请选择轮播图片", trigger: "change blur" }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    _add() {
      this.title = "新增";
      this.dialogVisible = true;
      this.form = {
        id: "",
        type: 2,
        img: "",
        skipType: "",
        skipId: ""
      };
    },
    _getBannerList() {
      getBannerList({
        type: 2
      }).then(res => {
        console.log(res);
        this.banners = res.data.banners;
      });
    },
    _bannerPullList() {
      bannerPullList({
        type: 2
      }).then(res => {
        console.log(res);
        this.bannerPull = res.data.banners;
      });
    },
    __init() {
      this._getBannerList();
      this._bannerPullList();
    },
    _edit(row) {
      this.title = "编辑";
      this.form = {
        id: row.id,
        type: 2,
        img: row.img,
        skipType: "",
        skipId: row.skipId
      };
      this.dialogVisible = true;
    },
    _delete(id){
       this.$confirm("是否继续该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteBanner({ id: id }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this._getBannerList();
          }
        });
      });
    },
    sure(formName) {
      console.log("formName", formName);

      this.$refs[formName].validate(valid => {
        console.log(valid);
        if (valid) {
          updateBanner(this.form).then(res => {
            if (!res.data.errCode) {
              this.$message.success("操作成功");
              this.dialogVisible = false;
              this._getBannerList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.__init();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.staff {
  .pic-uploader {
    .el-upload {
      padding: 20px;
    }
  }
}
</style>